<template>
    <div class="page">
        <page-title :title="$t('application.form.title1')" @back="back"></page-title>
        <div style="margin-bottom:0.64rem">
            <page-user-info1 @message="(e) => { params = { ...params, ...e } }" :oldParams="list"
                :disabled="disabled"></page-user-info1>
        </div>
        <page-user-info2 @message="(e) => { params = { ...params, ...e } }" :oldParams="list"
            :disabled="disabled"></page-user-info2>
        <div class="submit-btns">
            <el-button class="save" @click="save" v-if="!disabled">{{ $t('application.form.save') }}</el-button>
        </div>
    </div>
</template>

<script>
import pageTitle from "../components/page-title.vue"
import pageUserInfo1 from "../components/page-user-info1.vue";
import pageUserInfo2 from "../components/page-user-info2.vue";
import { apply } from "@/request/api"
import Confirm from '@/components/message/confirm.js';
import { empty } from '../utils/routine'
export default {
    components: {
        pageTitle,
        pageUserInfo1,
        pageUserInfo2

    },
    data() {
        return {
            params: {},
            disabled: false,
            clock: null
        }
    },
    mounted() {
        this.interval();
        if (!this.disabled) {
            this.clock = setInterval(this.interval(), 1000)
        }
    },
    methods: {
        back() {
            this.$router.push('/application/rules/routine')
        },
        save() {
            this.params['matchId'] = 2;
            for (let i = 0; i < this.params.memberParams.length; i++) {
                for (let key in this.params.memberParams[i]) {
                    if (this.params.memberParams[i][key] !== "") {
                        this.params.memberParams[i].isEmpty = '0';
                    }
                }
            };
            this.params.memberParams = this.params.memberParams.filter(item => {
                return item.isEmpty
            });
            let isErr = empty(this);
            if (isErr === 'err') {
                return;
            }
            for (let i = 0; i < this.params.memberParams.length; i++) {
                console.log("this.params.memberParams", this.params.memberParams);
                for (var key in this.params.memberParams[i]) {
                    if (this.params.memberParams[i][key] === '') {
                        this.$toast(this.$t('application.form.saveMessage'), 2000, 'warning', key);
                        return;
                    }
                }
            }

            apply(this.params).then(res => {
                if (res.data.resultCode === '200') {
                    if (this.$i18n.locale == 'zh') {
                        Confirm({ title: this.$t('application.form.saveSuccess'), message: '报名已于2024年5月20日23时59分.', right: this.$t('application.form.right') })
                            .then(() => {

                            })
                            .then((ret) => {

                            })
                            .catch((err) => {
                                // 点击取消按钮触发
                                if (err === 'cancel') return
                            })
                    } else {
                        Confirm({ title: this.$t('application.form.saveSuccess'), message: 'Registration has ended at 23:59:00 on May 11, 2024', right: this.$t('application.form.right') })
                            .then(() => {

                            })
                            .then((ret) => {

                            })
                            .catch((err) => {
                                // 点击取消按钮触发
                                if (err === 'cancel') return
                            })
                    }
                }
            })
        },
        interval() {
            if (new Date('2024-05-20T23:59:00').getTime() <= new Date().getTime()) {
                if (this.clock) {
                    clearInterval(this.clock);
                    this.clock = null;
                }
                this.disabled = true;

                if (this.$i18n.locale == 'zh') {
                    Confirm({ title: '报名截止', message: '报名已于2024-05-20 23:59:00 截止.', right: this.$t('application.form.right') })
                        .then(() => {

                        })
                        .then((ret) => {

                        })
                        .catch((err) => {
                            // 点击取消按钮触发
                            if (err === 'cancel') return
                        })
                } else {
                    Confirm({ title: 'Registration deadline', message: 'Registration has ended at 23:59:00 on May 20, 2024', right: this.$t('application.form.right') })
                        .then(() => {

                        })
                        .then((ret) => {

                        })
                        .catch((err) => {
                            // 点击取消按钮触发
                            if (err === 'cancel') return
                        })
                }
            }
        }
    },
    computed: {
        list() {
            let history = {};
            history = this.$store.state.routineList;
            return history
        }
    },
    unmounted() {
        if (this.clock) {
            clearInterval(this.clock);
            this.clock = null;
        }
    },
}
</script>

<style lang="less" scoped>
.submit-btns {
    padding: 0.85rem 0;
    display: flex;
    justify-content: center;

}

.save {
    width: 12.61rem;
    height: 1.6rem;
    background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
    border-radius: 0.21rem;
    backdrop-filter: blur(10px);

    :deep(span) {
        font-size: 0.64rem;
        font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
        color: #FFFFFF;
        line-height: 0.96rem;
    }
}
</style>